<template>
  <el-dialog
    @close="close"
    title="充值记录"
    :visible.sync="dialog"
    width="45%"
  >
    <div class="app-container">
      <div class="filter-container bor-container">
        <el-form size="mini" :inline="true">

          <el-form-item prop="start" class="input_co"   label="时间">
            <el-date-picker class="input_s"  v-model="formInline.begintime" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
          <el-form-item prop="end" class="input_co1"   label="——">
            <el-date-picker class="input_s"  v-model="formInline.endtime" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item  >
          <el-button size="mini" @click="query()" icon="el-icon-search">查询</el-button>
        </el-form>
      </div>
      <!-- <div class="filter-container btn-right">
        <el-button  icon="el-icon-plus" type="primary" @click="dialog.status = true" size="mini">新增用户</el-button>
      </div> -->
      <el-table class="per_tb" stripe v-loading="loading" border :data="tableData">
        <el-table-column prop="createtime" label="时间" width="80px">

        </el-table-column>
        <el-table-column prop="optype" label="类型">
            <template slot-scope="scop">
                <el-tag type="success" size="mini" v-if="scop.row.optype == 1">收入</el-tag>
                <el-tag type="danger" size="mini" v-else-if="scop.row.optype == 2">支出</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="money_type" label="货币">
            <template slot-scope="scop">
                <el-tag type="success" size="mini" v-if="scop.row.moneytype == 1">N豆</el-tag>
                <el-tag type="danger" size="mini" v-else-if="scop.row.moneytype == 2">N币</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="num" label="数量">

        </el-table-column>
        <el-table-column prop="money" label="金额（元）">

        </el-table-column>
        <el-table-column prop="paymenttype" label="支付方式">
            <template slot-scope="scop">
                <el-tag type="success" size="mini" v-if="scop.row.paymenttype == 0">微信</el-tag>
                <el-tag type="danger" size="mini" v-else-if="scop.row.paymenttype == 1">支付宝</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="source" label="设备来源">
          <el-tag type="success" size="mini" v-if="source == 1">pc</el-tag>
          <el-tag type="danger" size="mini" v-else-if="source == 2">Android</el-tag>
          <el-tag type="success" size="mini" v-else="source == 3">IOS</el-tag>
          <el-tag type="danger" size="mini" v-else-if="source == 4">mac</el-tag>
        </el-table-column>
        <el-table-column prop="remark" label="详情">

        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination-right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.page"
        :page-sizes="[10]"
        :page-size="formInline.pagenum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="formInline.total">
      </el-pagination>
    </div>
  </el-dialog>
</template>
<script>
  import { getchargeListAPI } from '@/api/person'
  import { mapGetters } from 'vuex'
  export default {
    name: 'Recharge',
    props: {
      dialog_: {
        type: Boolean,
        default: false
      },
      id: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        status_type:'',
        value: '',
        formInline: {
          userid:'',
          name: '',
          status:0, //0未封禁  1封禁
          page:1,
          pageSize: 10,
          pagenum: 10,
          total: 0,
          optype:1

        },
        editUser: null, // 编辑时传入的对象
        loading: false,
        tableData: [],
        dialog: {
          infoStatus: false,
          giftStatus: false,
          rechargeStatus: false,
          withdrawStatus: false,
          exchangeStatus: false,
          accountStatus: false,
          disableStatus: false,
          identityStatus: false,
          personId:''
        }
      }
    },
    computed: {
      ...mapGetters([
        'buttons',
      ])
    },
    mounted() {
      this.getUserList()
    },
    methods: {
      // 编辑打开弹窗
      openEdit(obj) {
        this.dialog.infoStatus = true
      },
      close() {
        this.$emit('close')
      },
      // 操作栏中的下拉框发生修改
      selectChange(obj) {

      },
      // 点击查询事件
      query() {
        //this.formInline.pagenum = 10
        this.getUserList()
      },
      // 操作成功的钩子用来更新列表
      success() {
        this.getUserList()
      },
      // 关闭弹窗返回的钩子
      closeInfo() {
        this.dialog.infoStatus = false;
      },

      closeWithdraw() {
        this.dialog.withdrawStatus = false;
      },
      // pageSize发生改变触发
      handleSizeChange(val) {
        this.pageNum = 1
        this.pageSize = val
        this.getUserList()
      },
      // pageNum 发生改变触发
      handleCurrentChange(val) {
        this.formInline.pageNum = val
        this.getUserList()
      },
      // 获取用户列表
      getUserList() {
        this.loading = true
       // this.formInline.userid = '103181'
        getchargeListAPI(this.formInline).then(res => {
          this.loading = false
          if (res.code === 0) {
            this.tableData = res.data.list
            this.formInline.total = res.data.total
          } else {
            this.$message.error(res.message)
          }
        })
      }
    }
  }
</script>
<style>
  .userCount{
    background-color: rgba(242, 242, 242, 1);
    height: 45px;
    line-height: 45px;
    margin-left: 38px;
    font-size: 14px;
  }
  .userCount span {
    margin-right: 40px;
    margin-left: 14px;
  }
  .input_co{
    margin-left:38px;
  }
  .input_co1{
    margin-left:0px;
  }
  .input_s{
    width:70px;
  }
  .el-date-editor.input_s.el-input.el-input--mini.el-input--prefix.el-input--suffix.el-date-editor--datetime {
    width: 125px;
  }
  .per_tb{
    margin-top: 15px;
    margin-left: 38px;
    width:97.8%;
  }
  .pagination-right.el-pagination.is-background {
    margin-left: 36px;
    margin-top: 5px;
  }
</style>

